<template>
  <div class="listViews">
    <list-viewstop :playlist="playlist"></list-viewstop>
    <play-list :playlist="playlist"></play-list>
    <!-- <play-bottm class="possionbottm"></play-bottm> -->
  </div>
</template>

<script>
import { playListDetail } from '../js/axios'
import listViewstop from '../components/listViews/listViewstop.vue'
import playList from '../components/listViews/playList.vue'
import playBottm from '../components/PlayBottm.vue'

export default {
  data () {
    return {
      playlist: [],
      al: {},
    }
  },
  components: {
    listViewstop,
    playList,
    playBottm,
  },
  created () {
    // console.log(this.$route.query)
    this.getplayListDetail( this.$route.query )
  },
  methods: {
    async getplayListDetail ( id ) {
      var that = this
      playListDetail( id ).then( res => {
        // console.log( res.data.playlist )
        // this.$store.commit( 'setplayList', res.data.playlist.tracks )
        that.playlist = res.data.playlist
        // console.log( this.$store.state.playList )
      } )
    }
  }
}
</script>

<style lang="less" scoped>
.listViews {
  .possionbottm {
    position: fixed;
    bottom: 0.2rem;
  }
}
</style>